<template>
  <div class="box">
    <header class="header">
      <van-search v-model="value" show-action label="" placeholder="请输入搜索关键词" @search="onSearch">
        <template #left>
          <van-icon name="list-switch" />
        </template>
        <template #right-icon>
          <van-icon name="replay" />
        </template>
        <template #action>
          <van-icon name="apps-o" />
        </template>
      </van-search>
    </header>
    <main class="main">
      <van-tabs v-model:active="active" @change="onChange">
        <van-tab title="推荐">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item>
              <img style="width: 100%;"
                src="https://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img style="width: 100%;"
                src="https://m.360buyimg.com/seckillcms/jfs/t1/136705/5/49661/220385/67233e4bF9d6a0b1e/87b600d35c7f59b0.jpg" />
            </van-swipe-item>
            <van-swipe-item>
              <img style="width: 100%;"
                src="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/155900/11/45865/144025/670dcd2eF4fe7fadf/327a2884384304f1.jpg!q70.dpg.webp" />
            </van-swipe-item>
          </van-swipe>
          <div>
            <img style="width: 100%;" src="@/assets/ll.png" alt="">
            <P>
              倒计时<van-count-down :time="time" />
            </P>
          </div>
          <div>
            <priList />
          </div>
        </van-tab>
        <van-tab title="美食">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <priList />
          </van-pull-refresh>
          
        </van-tab>
        <van-tab title="运动">内容 3</van-tab>
        <van-tab title="保健品">内容 4</van-tab>
        <van-tab title="内衣">内容 4</van-tab>
        <van-tab title="更多">内容 4</van-tab>
      </van-tabs>

      <ul>
        <li v-for="item in list" :key="item.id">
          <img :src="item.image" alt="">
          <p>{{ item.title }}</p>
          <p>{{ item.price }}</p>
        </li>
      </ul>
    </main>
  </div>
  <footer class="footer"></footer>
</template>

<script setup>

import priList from '../home/priList.vue';
import requset from '@/uitle/requset'
import { ref, onMounted } from 'vue'
const time = ref(10 * 1000);
const active = ref(0);
const list = ref([])
const onChange = (index) => {

  const arr = ["推荐", "美食", "保健品", "内衣", "更多"]
  requset.get('/kind', {
    params: {
      key: arr[index]
    }
  }).then(res => {
    if (res.data.code == 200) {
      console.log(res);
      list.value = res.data.data
    }
  })
}
onMounted(() => {
  onChange()
})
</script>

<style lang="scss" scoped></style>